
import {
    Input,
    Button,
    Table,
    Form,
    Modal,
    Alert
} from 'antd';
import React, { useState, useEffect } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import type { TableRowSelection } from 'antd/es/table/interface';
import { getUserList, delUserList, addUser} from "../../api/user";
import md5 from  "js-md5";
import moment from "moment";
// import UserFrom from "../../components/UserFrom";
export interface DataType {
    //序号
    id?: number,
    // 账户
    username: string,
    // 密码
    password: string,
    // 头像
    avatar: string,
    // 注册时间
    registerTime: string
}
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};


export const UserList: React.FC = () => {
    // 用户信息列表
    const [userList, setUserList] = useState<DataType[]>([]);
    // 弹出框
    const [modal, setModal] = useState<boolean>(false)
    // 弹出框显示
    const isShowModal = () => {
        setModal(true);
    }
    // 弹出框隐藏
    const hideModal = () => {
        setModal(false);
    }

    // 用户名
    const [userName, setUserName] = useState<any>('')
    // 密码
    const [userPass, setUserPass] = useState<any>('')

    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const showModal = () => {
        setOpen(true);
    };

    const validator = (val:string) => /^[\u2E80-\u9FFF\w-]{4,20}$/.test(val);

    const handleOk = () => {
        // if(!validator(userName)) {
        //     <Alert message="用户名格式错误" type="error" />
        //     console.log('错误');
        //     return 
        // }
        const data = {
            username: userName,
            password: md5(userPass),
            avatar: 'https://i1.hdslb.com/bfs/face/52fdc546888d1cc16628d90785e89f84f9d1b202.jpg@240w_240h_1c_1s.webp',
            registerTime: moment(new Date()).format('YYYY-MM-DD  HH:mm:ss')
        }
        addUser(data).then(res => {
            // console.log(res);
            // 必须搭配这个使用
            // eslint-disable-next-line no-restricted-globals
            location.reload()
        })
    };
    const handleCancel = () => {
        setOpen(false);
    };
    const [form] = Form.useForm();


    const onFinish = (values: any) => {
        console.log(values);
    };

    // 请求用户信息
    const handerUser = () => {
        getUserList().then(res => {
            // console.log(res.data);
            setUserList(res.data)
        })
    }
    useEffect(() => {
        handerUser()
    }, [])
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            width: 80,
            dataIndex: 'id',
            // key: 'id',
            // fixed: 'left',
            align: 'center',
        },
        {
            title: '账号',
            // width: 100,
            dataIndex: 'username',
            // key: 'name',
            // fixed: 'left',
            align: 'center',
        },
        {
            title: '密码',
            // width: 100,
            dataIndex: 'password',
            // key: 'pass',
            // fixed: 'left',
            align: 'center',
        },
        {
            title: '注册时间',
            // width: 100,
            dataIndex: 'registerTime',
            // key: 'registerTime',
            // fixed: 'left',
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            width: 200,
            align: 'center',
            render: (text:any, record: any, index:any) => {
                console.log(text
                    
                    
                       );
                
                return (
                    <>
                        {/* 新增 */}
                        <EditOutlined style={{ color: '#fff', width: '40px', height: '40px', fontSize: '20px', backgroundColor: '#1890ff', borderRadius: '20px', lineHeight: '40px', marginRight: '20px' }} 
                            onClick={
                                () => {

                                }
                            }
                        />

                        {/* 删除 */}
                        <DeleteOutlined style={{ color: '#ff4d4f', width: '40px', height: '40px', fontSize: '20px', borderRadius: '20px', lineHeight: '40px', border: '1px solid #ff4d4f' }}
                            onClick={
                                () => {
                                    delUserList(record.id)
                                    // eslint-disable-next-line no-restricted-globals
                                    location.reload()
                                }
                            } />
                    </>
                )
            }
        }
    ]
    return (
        <>
            <div className="site-input-group-wrapper">
                <Input.Group compact style={{ marginBottom: '10px' }}>
                    <Button type="primary" style={{ width: '100px', marginLeft: '10px', height: '32px', borderRadius: '2px' }}
                        onClick={showModal}
                    >
                        添加新用户
                    </Button>
                    {/* <Button type="primary" style={{ width: '90px', marginLeft: '10px', height: '32px', borderRadius: '2px'}}>
                        价格升序
                    </Button> */}
                </Input.Group>
                <Table columns={columns} dataSource={userList} bordered={true}  style={{}} />

                {/* <UserFrom msg='111'></UserFrom> */}
                <Modal
                    // centered={true}
                    open={open}
                    title="添加用户"
                    onCancel={handleCancel}
                    footer={[
                        <Button key="submit" type="primary" loading={loading}
                        onClick={handleOk}>
                            提交
                        </Button>,
                        <Button key="back" onClick={handleCancel}>
                            取消
                        </Button>,
                    ]}
                >
                    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}
                        style={{
                            marginLeft: '-160px'
                        }}
                    >
                        <Form.Item name="name"  label="账号" rules={[{ required: true }]}
                        >
                            <Input value={userName}
                                onChange={(e:any) => {
                                    setUserName(e.target.value)
                                    console.log(userName);
                                }}
                            />
                        </Form.Item>
                        <Form.Item name="password" label="密码" rules={[{ required: true }]}

                        >
                            <Input value={userPass} 
                                onChange={(e:any) => {
                                    setUserPass(e.target.value)
                                    console.log(userPass);
                                    
                                }}
                            />
                        </Form.Item>
                        <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
                        >
                            {({ getFieldValue }) =>
                                getFieldValue('gender') === 'other' ? (
                                    <Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
                                        <Input />
                                    </Form.Item>
                                ) : null
                            }
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </>
    )
}